<!--
 *  Copyright (c) 2025 GraphQL Contributors
 *  All rights reserved.
 *
 *  This source code is licensed under the license found in the
 *  LICENSE file in the root directory of this source tree.
-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Confetti GraphiQL</title>
    <style>
        body {
            margin: 0;
        }

        #graphiql {
            height: 100dvh;
        }

        .loading {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
        }
    </style>
    <link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
    <link
            rel="stylesheet"
            href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
    />
    <!--
     * Note:
     * The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
     * `@emotion/is-prop-valid` is a shim to remove the console error ` module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126
    -->
    <script type="importmap">
        {
          "imports": {
            "react": "https://esm.sh/react@19.1.0",
            "react/": "https://esm.sh/react@19.1.0/",

            "react-dom": "https://esm.sh/react-dom@19.1.0",
            "react-dom/": "https://esm.sh/react-dom@19.1.0/",

            "graphiql": "https://esm.sh/graphiql@5?standalone&external=react,react-dom,@graphiql/react,graphql",
            "graphiql/": "https://esm.sh/graphiql@5/",
            "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
            "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",

            "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
            "graphql": "https://esm.sh/graphql@16.11.0",
            "@emotion/is-prop-valid": "data:text/javascript,"
          }
        }
    </script>
    <script type="module">
        import React from 'react';
        import ReactDOM from 'react-dom/client';
        import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
        import { createGraphiQLFetcher } from '@graphiql/toolkit';
        import { explorerPlugin } from '@graphiql/plugin-explorer';
        import 'graphiql/setup-workers/esm.sh';

        const fetcher = createGraphiQLFetcher({
            url: 'https://confetti-app.dev/graphql',
        });
        const plugins = [HISTORY_PLUGIN, explorerPlugin()];

        function App() {
            return React.createElement(GraphiQL, {
                fetcher,
                plugins,
                defaultEditorToolsVisibility: true,
            });
        }

        const container = document.getElementById('graphiql');
        const root = ReactDOM.createRoot(container);
        root.render(React.createElement(App));
    </script>
</head>
<body>
<div id="graphiql">
    <div class="loading">Loading…</div>
</div>
</body>
</html>